<template>
  <div id="app">
    <router-view :key="key"/>
  </div>
</template>
<script>
import screenfull from 'screenfull'
import{setRemInit} from '@/rem'
export default {
  data () {
      return {
        isFullscreen: false
      }
  },
  created(){
    // this.screenfull();
  },
  computed:{
      key(){
        return this.$route.name?this.$route.name+ +new Date():this.$route+ +new Date()
      }
  },
  methods: {
    /**
     * 全屏事件
     */
    screenfull() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '浏览器不支持全屏',
          type: 'warning'
        })
        return false
      }
      // screenfull.toggle()
      screenfull.request();
      this.isFullscreen = true
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
          isFull = false
      }
      return isFull
    }
  },
  mounted() {
    setRemInit();
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 全屏下按键esc后要执行的动作
        this.isFullscreen = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  #app{
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>



